<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        选择器 格式 优先级权重
        id选择器 #id 100
        类选择器 .classname 10
        属性选择器 a[ref=“eee”] 10
        伪类选择器 li:last-child 10
        标签选择器 div 1
        伪元素选择器 li:after 1
        相邻兄弟选择器 h1+p 0
        ⼦选择器 ul>li 0
        后代选择器 li a 0
        通配符选择器 * 0

        注意事项：
        (!important)声明的样式的优先级最⾼；
        如果优先级相同，则最后出现的样式⽣效；
        继承得到的样式的优先级最低；
        通⽤选择器（*）、⼦选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值
        都为 0 ；
        样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器⽤户⾃定义样式
        > 浏览器默认样式。


        隐藏元素的⽅法有哪些 position: absolute：z-index: 负值：clip/clip-path, transform: scale(0,0)：
        link和@import的区别
            1、能不能加载其他的，link可以，@import不行,link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
            2\ link一进来就加载，@import等完全加载完再加载,link引⽤CSS时，在⻚⾯载⼊时同时加载；@import需要⻚⾯⽹⻚完全载⼊以后加载。
            3\ 兼容性问题，前者没有后者有 link是XHTML标签，⽆兼容问题；@import是在CSS2.1提出的，低版本的浏览器不⽀持。
            4、link支持js改变dom,后者不行，link⽀持使⽤Javascript控制DOM去改变样式；⽽@import不⽀持。



        transition和animation的区别
            transition是过渡属性，强调过度，它的实现需要触发⼀个事件（⽐如⿏标移动上去，焦点，点击
            等）才执⾏动画。它类似于flash的补间动画，设置⼀个开始关键帧，⼀个结束关键帧。
            animation是动画属性，它的实现不需要触发事件，设定好时间之后可以⾃⼰执⾏，且可以循环⼀
            个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（⽤@keyframe定义）完成动

            display:none与visibility:hidden的区别
                1、display:none 会让元素完全从渲染树中消失，渲染时不会占据任何空间；
                visibility:hidden 不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容
                不可⻅。
                2、display会重排，visibility重绘


        伪元素和伪类的区别和作⽤？
            伪元素：在内容元素的前后插⼊额外的元素或样式，但是这些元素实际上并不在⽂档中⽣成。它们
            只在外部显示可⻅，但不会在⽂档的源代码中找到它们，因此，称为“伪”元素。例如：

                p::before {content:"第⼀章：";}
                p::after {content:"Hot!";}
                p::first-line {background:red;}
                p::first-letter {font-size:30px;}

        标准盒模型和IE盒模型
            标准: margin,padding,border,content(width,height);
            怪异: margin, content(width,height,padding,border);

        CSS3中有哪些新特性
            新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）伪元素，伪类
            em,rem
            圆⻆ （border-radius:8px）
            多列布局 （multi-column layout）
            阴影和反射 （Shadoweflect）
            ⽂字特效 （text-shadow）
            ⽂字渲染 （Text-decoration）
            线性渐变 （gradient）
            旋转 （transform）
            增加了旋转,缩放,定位,倾斜,动画,多背景
        图片
        BMP，是⽆损的
        GIF是⽆损的
        JPEG是有损的、

        display:inline-block 什么时候会显示间隙
        有空格时会有间隙，可以删除空格解决；
        margin 正值时，可以让 margin 使⽤负值解决；
        使⽤ font-size 时，可通过设置 font-size:0 、 letter-spacing 、 word-spacing 解

        单行文本溢出
            overflow: hidden;
            text-overflow: ellipsis; 省略号
            white-space: nowrap; 不换行
        多行文本溢出
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box; // 弹性伸缩盒子
            -webkit-line-clamp:3;
            -webkit-box-orient: vertical;

        @media 可以针对不同的屏幕尺⼨设置不同的样式，特别是需要设置设计响应式的⻚⾯，@media 是⾮常有⽤的。当重置浏览器⼤

        window.innerHeight 是浏览器可视区的⾼度；
        document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚
        动的过的距离；

        z-index属性在下列情况下会失效：
            ⽗元素position为relative时，⼦元素的z-index失效。解决：⽗元素position改为absolute或
            static；
            元素没有设置position属性为⾮static属性。解决：设置该元素的position属性为relative，absolute
            或是fixed中的⼀种；
            元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；

        
    -->

    <p>112131315456</p>
    <!-- <p>收到你没发烧</p> -->

    <script>

    </script>
    <style>
        p::before {content:"第⼀章111：";}
        p::after {content:"Hot!";}
        p::first-line {background:red;}
        p::first-letter {font-size:30px;}
    </style>
</body>

</html>